import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, message, Spin } from 'antd';
import SettingStyle from '@/page/setting/setting.scss';
import MModal from '@/component/common/MModal';
import UserStore from '@/store/User';
import ApiHelper from '@/store/ApiHelper';
import { update_psw_by_mobile } from "@/constants/ApiTypes";

class ModifyPassword extends Component {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        onSuccess: PropTypes.func.isRequired
    };
    defaultState = {
        psw1: '',
        psw2: '',
        spinning: true
    };
    state = this.defaultState;
    componentDidMount() {
        this._isMounted = true;
        setTimeout(() => {
            this._setState({ spinning: false });
        }, 200);
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    //fix异步
    _setState = state => {
        if (this._isMounted) this.setState(state);
    };
    inputOnChange = e => {
        this.setState({ [e.target.name]: e.target.value });
    };
    async pwdSubmit() {
        const { psw1, psw2 } = this.state;
        if (psw1 == '') {
            this.input_psw1.focus();
            return message.warn('请填写新密码！', 1.5);
        }
        if (psw2 == '') {
            this.input_psw2.focus();
            return message.warn('请填写重复密码！', 1.5);
        }
        if (psw1.length < 6 || psw1.length > 16) {
            this.input_psw1.refs.input.select();
            return  message.warn('新密码必须为6到16位的数字或字母组合！', 1.5);
        }
        if (psw1 !== psw2) {
            this.input_psw2.refs.input.select();
            return message.warn('两次密码填写不一致！', 1.5);
        }
        this.setState({ spinning: true });

        const data = {
            new_psw: psw1
        };

        const result = await ApiHelper.requestPost(update_psw_by_mobile, data);
        this._setState({ spinning: false });
        if (result.status) {
            MModal.success({ title: '操作成功', content: '密码修改成功' });
            this._setState(this.defaultState);
            this.props.onSuccess();
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    }
    render() {
        const { psw1, psw2 } = this.state;
        const { inputOnChange, pwdSubmit } = this;
        return (
            <Spin tip="loading" spinning={this.state.spinning} delay={150}>
                <table border="0" className={SettingStyle['modify-pwd']}>
                    <thead />
                    <tbody>
                        <tr>
                            <td>手机号码:</td>
                            <td width="200px">{UserStore.info.mobile}</td>
                        </tr>
                        <tr>
                            <td>请输入新密码:</td>
                            <td width="200px"><Input name="psw1" value={psw1} style={{ width: 180 }} ref={input => this.input_psw1 = input} type="password" onChange={inputOnChange} placeholder="请输入新密码"/></td>
                        </tr>
                        <tr>
                            <td>请再次输入新密码:</td>
                            <td width="200px"><Input name="psw2" value={psw2} style={{ width: 180 }} ref={input => this.input_psw2 = input} type="password" onChange={inputOnChange} placeholder="请再次输入新密码"/></td>
                        </tr>
                        <tr>
                            <td> </td>
                            <td><a className={SettingStyle['account-more-btn']} onClick={pwdSubmit}>提交</a></td>
                        </tr>
                    </tbody>
                </table>
            </Spin>
        );
    }
}

export default ModifyPassword;